<template>
	<view>
		<view class="top_img">
			<image src="https://www.daolangtongge.com/read-book-api/profile/mini_app/img/walletbcg.png" mode=""></image>
			<view class="imgads flex_jc_sb">
				<view class="">
					<view class="texts flex" @click="$pageGo('/mypage/more/withdrawRules')">
						<view class="">账户余额(元)</view>
						<uni-icons size="15" type="help" color="#75613E"></uni-icons>
					</view>
					<view class="price">{{ dataInfo.amount }}</view>
					<view class="price_s flex">
						<view class="t1">
							累计收益：
							<text>{{ dataInfo.amountTotal }}</text>
						</view>
						<view class="t1">
							已提现：
							<text>{{ dataInfo.amountDraw }}</text>
						</view>
					</view>
				</view>
				<view class="btn" @click="$pageGo('/mypage/more/withdraw')">提现</view>
			</view>
		</view>
		<loadstatusVue :status="data.loadStatus">
			<view class="content">
				<view class="item flex_jc_sb" v-for="(item,index) in data.list" :key="index">
					<view class="item_l">
						<view class="flex">
							<view class="img_block flex_jc_cent">
								<image src="/static/qb.png" mode=""></image>
							</view>
							<view class="" v-if="item.type == 0">提现</view>
							<view class="" v-if="item.type == 1">退款</view>
						</view>
						<view class="time">{{item.createTime}}</view>
					</view>
					<view class="item_r">-{{item.amount}}</view>
				</view>
			</view>
		</loadstatusVue>
	</view>
</template>

<script setup>
import { ref, reactive, getCurrentInstance, onMounted } from 'vue';
import loadstatusVue from '@/components/loadstatus/loadstatus.vue';
import { wechatApplyList } from '@/api/branch/revenue.js';
import { getData } from '@/api/user.js';
import { toast, showConfirm } from '@/utils/common.js';
const data = reactive({
	list: [],
	loadStatus: 'before', // 加载状态
	hasMore: true, // 是否有更多数据
	isLoading: false, // 防止重复请求的锁
	queryParams: {
		pageNum: 1,
		pageSize: 10
	}
});
// 延迟函数
const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
// 设置加载状态的方法
const setLoadStatus = (status, options = {}) => {
	data.loadStatus = status;
};
// 处理响应数据的通用方法
const handleResponseData = async (res, isLoadMore = false) => {
	// 如果是加载更多，确保loading状态至少显示500ms，避免闪烁
	if (isLoadMore) {
		await delay(500);
	}
	if (res.code == 200) {
		// 处理数据
		if (isLoadMore) {
			data.list.push(...res.rows);
		} else {
			data.list = res.rows || [];
		}
		// 判断是否有更多数据
		data.hasMore = res.rows && res.rows.length >= data.queryParams.pageSize;
		// 设置状态
		if (data.list.length === 0) {
			setLoadStatus('empty');
		} else if (!data.hasMore) {
			setLoadStatus('noMore');
		} else {
			setLoadStatus('success');
		}
		return true;
	}
	return false;
};
// 获取列表数据
const getList = async (isLoadMore = false) => {
	// 防止重复请求
	if (data.isLoading) return;
	try {
		data.isLoading = true;
		if (isLoadMore) {
			if (!data.hasMore) return;
			setLoadStatus('loading');
		} else {
			setLoadStatus('before');
			// 初始加载时显示loading至少1秒，避免闪烁
			await delay(300);
		}
		const res = await wechatApplyList(data.queryParams);
		const success = await handleResponseData(res, isLoadMore);
		if (!success) {
			// 请求失败的处理
			setLoadStatus(data.list.length === 0 ? 'empty' : 'success');
		}
	} catch (err) {
		await delay(300);
		setLoadStatus(data.list.length === 0 ? 'empty' : 'success');
	} finally {
		data.isLoading = false;
	}
};
const dataInfo = reactive({
	amount: 0,
	amountDraw: 0,
	amountTotal: 0
});
const getInfo = () => {
	getData({}).then((res) => {
		if (res.code == 200) {
			Object.assign(dataInfo, res.data);
		}
	});
};
const loadMore = () => {
  if (data.isLoading || !data.hasMore) {
    return false;
  }
  
  data.queryParams.pageNum++;
  getList(true); // 传递 true 表示是加载更多
  
  return true;
};
defineExpose({
	loadMore
});
onMounted(() => {
	getInfo();
	getList();
});
</script>
<style lang="scss" scoped>
.top_img {
	width: 710rpx;
	height: 180rpx;
	position: relative;
	margin: 0rpx auto;
	image {
		display: block;
		width: 710rpx;
		height: 180rpx;
	}
	.imgads {
		width: 710rpx;
		height: 180rpx;
		position: absolute;
		top: 0%;
		padding: 26rpx 30rpx;
		box-sizing: border-box;
		.texts {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 20rpx;
			color: #75613e;
		}
		.price {
			margin-top: 15rpx;
			font-family: 'DIN-BOLD';
			font-weight: bold;
			font-size: 40rpx;
			color: #75613e;
			text {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #75613e;
			}
		}
		.price_s {
			margin-top: 10rpx;
			.t1 {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #75613e;
				margin-right: 52rpx;
				text {
					font-family: 'DIN-BOLD';
					font-weight: 500;
					font-size: 28rpx;
					color: #75613e;
				}
			}
		}
		.btn {
			width: 160rpx;
			height: 56rpx;
			background: #75613e;
			border-radius: 60rpx 60rpx 60rpx 60rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #ffffff;
			text-align: center;
			line-height: 56rpx;
		}
	}
}
.content {
	.item {
		width: 710rpx;
		height: 160rpx;
		background: #ffffff;
		border-radius: 20rpx;
		padding: 28rpx 20rpx;
		box-sizing: border-box;
		margin: 20rpx auto;
		.item_l {
			.img_block {
				width: 60rpx;
				height: 60rpx;
				background: #eee8d8;
				border-radius: 30rpx;
				margin-right: 20rpx;
				image {
					width: 32rpx;
					height: 32rpx;
				}
			}
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #1b1b1b;
			.time {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #8f8f8b;
				margin-top: 10rpx;
			}
		}
		.item_r {
			font-family: 'DIN-BOLD';
			font-weight: 500;
			font-size: 40rpx;
			color: #75613e;
		}
	}
}
</style>
